<style lang="less">

</style>

<template>
    <Row>
        <Card>
            <Button type="primary" @click="projectSwitch">切换项目</Button>
        </Card>
        <Row class="margin-top-10">
            <Card>
                <p slot="title">接口文档</p>
                <Col class="margin-top-10">
                    <Row>
                        <Col span="4">
                            <Row style="margin-right: 50px">
                                <Input @on-change="groupNameOnChange" v-model="groupName" placeholder="请输入分组名称搜索" ></Input>
                            </Row>
                            <Tree :data="blockTree" :render="renderContent"></Tree>
                        </Col>

                        <!-- 右侧内容区域 -->
                        <Col span="20" :style="bgColor">
                            <div style="border: 1px solid #e0e0e0; min-height: 100vh;position: relative">
                                <div style="margin: 10px;position: absolute;top: 0;right: 0">
                                    <div @click="bgColorWhite" style="border: 1px solid #e0e0e0;background-color: #fff;height: 30px;width:30px"></div>
                                    <div @click="bgColorDark" style="background-color: #3b3c37;height: 30px;width:30px"></div>
                                </div>
                                <div style="padding: 25px">
                                    <div v-if="contentShow" >
                                        <div v-if="data.length === 0">暂无文档。</div>
                                        <div v-for="(item, index) in data" :key="index" >
                                            <Row style="font-size: 20px">
                                                <Col>{{item.talkProject}}<span style="margin-left: 20px">{{item.jiekou_name}}</span></Col>
                                            </Row>
                                            <Row>
                                                <Col style="font-size: 16px;">http请求:{{item.requestType}}</Col>
                                            </Row>
                                            <Row>
                                                <Col><span style="font-size: 16px;margin-right: 10px">http请求url:</span>{{item.url}}</Col>
                                            </Row>
                                            <Row style="margin-top: 20px;font-size: 16px">
                                                <Col  span="6">get参数key</Col>
                                                <Col  span="6">get参数value</Col>
                                                <Col  span="6">get参数描述</Col>
                                            </Row>
                                            <Row v-for="(item1, index1) in item.getRequestParameters" :key="item1.key">
                                                <Col  span="6">{{item1.key}}</Col>
                                                <Col  span="6">{{item1.value}}</Col>
                                                <Col  span="6">{{item1.describe}}</Col>
                                            </Row>

                                            <Row style="margin-top: 20px;font-size: 16px">
                                                <Col  span="6">post参数key</Col>
                                                <Col  span="6">post参数value</Col>
                                                <Col  span="6">post参数描述</Col>
                                            </Row>
                                            <Row v-for="(item2, index2) in item.postRequestParameters" :key="item2.key">
                                                <Col  span="6">{{item2.key}}</Col>
                                                <Col  span="6">{{item2.value}}</Col>
                                                <Col  span="6">{{item2.describe}}</Col>
                                            </Row>

                                            <Row style="margin-top: 20px">
                                                <span style="font-size: 16px">
                                                    返回说明 （正常时返回的json数据 示例）
                                                </span>
                                                <pre>{{item.result_data}}</pre>
                                            </Row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </Col>
            </Card>

            <modalShow @updateProjectId="getProjectId" v-if="isModalShow" @hideModal="closeProjectSwitch"></modalShow>
        </Row>

    </Row>
</template>

<script>
    import util from '../../../libs/util';
    import qs from 'qs';
    import modalShow from './interfaceTest/modalShow';

    export default {
        name: 'interfaceDoc',
        components: {
            modalShow
        },
        data () {
            return {
                data: '',
                contentShow: false,
                isModalShow: false,
                bgColor: '',
                projectId: '',
                blockTree: [],
                groupName: '' // 分组名称搜索
            };
        },
        methods: {
            // 背景颜色切换
            bgColorDark () {
                this.bgColor = 'background-color: #3b3c37;color: #f8f8f2';
            },
            bgColorWhite () {
                this.bgColor = '';
            },
            // 自定义树形图内容
            renderContent (h, { root, node, data }) {
                let icon = data.children && data.children.length > 0 ? 'ios-folder' : null;
                if (!data.file) {
                    icon = 'network';
                    // this.bgFlag[node.nodeKey] = false;
                }
                return h('span', {
                    style: {
                        // display: 'inline-block',
                        width: '100%',
                        minHeight: '30px'
                        // backgroundColor: this.bgFlag[node.nodeKey] ? '#d5e8fc' : null
                    },
                    on: {
                        'click': () => {
                            console.log('自定义树形图data-->', node);
                            console.log('自定义树形图this.bgFlag-->', this.bgFlag);
                            if (!data.file) {
                                // this.bgFlag[node.nodeKey] = !this.bgFlag[node.nodeKey];
                                this.blockId = data.id;
                                this.initData();
                                this.contentShow = true;
                            }
                        }
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: icon
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ])
                ]);
            },
            // 获取模态对话框中选择项目ID
            getProjectId (projectId, modalShow) {
                console.log('获取模态对话框中选择项目ID-->', projectId, modalShow);
                this.projectId = projectId;
                this.isModalShow = modalShow;
            },
            // 点击切换项目时
            projectSwitch () {
                this.isModalShow = true;
            },
            // 关闭切换项目模态框
            closeProjectSwitch () {
                this.isModalShow = false;
            },
            // 初始化数据
            initData () {
                let params = {
                    'beforeTaskId': localStorage.projectId,
                    'interDetaile_id': this.blockId
                };
                util.ajax.get('api/document', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        this.data = res.data.data.ret_data;
                    } else {
                        console.log('获取内容异常');
                    }
                });
            },
            // 分组名称搜索框改变时
            groupNameOnChange (e) {
                // console.log('eeeeeee', e.target.value);
                this.groupName = e.target.value;
                this.getBlockTree();
            },
            // 获取左侧树形图的信息
            getBlockTree () {
                let params = {
                    'beforeTaskId': this.projectId,
                    'search_msg': this.groupName
                };
                util.ajax.get('api/testCaseDetaile/blockTree/0', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        this.blockTree = res.data.data.result;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            }
        },
        created () {
            if (localStorage.projectId) {
                this.projectId = localStorage.projectId;
            } else {
                this.isModalShow = true;
            }
            this.getBlockTree();
        },
        watch: {
            'projectId': function (val, oldVal) {
                if (val) {
                    this.getBlockTree();
                }
            }
        }
    };
</script>
